<template>
  <div class="Time">
    <div class="Alltime" id="myChart"></div>
    <div class="progress">
      <div class="h">
        <span style="font-size: 16px">当前进度:</span>
        <el-progress
          type="circle"
          :percentage="rows.progress"
          :status="rows.progress === 100 ? 'success' : null"
        ></el-progress>
      </div>
      <div class="miaoshu">
        <span>负责人：{{ rows.username }}</span>
        <span>开始时间：{{ rows.startTime }}</span>
        <span>结束时间：{{ rows.endTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
//按需引入echarts
const echarts = require("echarts");
export default {
  name: "Time",
  props: ["rows"],
  watch: {
    rows: {
      handler(oldVal, newVal) {
        if (oldVal) {
          this.$http({
            method: "post",
            url: `burnDown/selectBurnDownBySpurtId?spurtId=${oldVal.id}`,
          }).then(({ data }) => {
            if (data.flag) {
              let arr = data.data;
              let arrTime = [];
              let arrData = [];
              arr.forEach((element) => {
                if (element.totalTime === -1) {
                  element.totalTime = 0;
                }
                arrTime.push(element.time);
                arrData.push(element.totalTime);
              });
              this.initCharts(arrTime, arrData);
            } else {
              console.log(data);
            }
          });
        }
      },
    },
  },
  methods: {
    //燃尽图展示
    initCharts(arrTime, arrData) {
      let myChart = echarts.init(document.getElementById("myChart"));
      //绘制图表
      myChart.setOption({
        title: {
          text: "当前迭代的燃尽图",
          x: "center",
        },
        tooltip: {
          trigger: "axis",
        },

        xAxis: {
          type: "category",
          data: arrTime,
          // axisLabel: {
          //   interval: 0,
          // },
        },
        yAxis: {
          type: "value",
          splitNumber: 10,
        },
        legend: { left: "4%",},
        grid: {
          top: "14%",
          left: "4%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name:'当前迭代的工时',
            data: arrData,
            type: "line",
          },
        ],
      });
    },
  },
};
</script>                       

<style lang="less" scoped>
.Time {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .Alltime {
    padding-top: 10px;
    margin: 10px 0;
    width: 1430px;
    height: 450px;
    background-color: rgba(255, 255, 255, 0.8);
  }
  .progress {
    width: 1430px;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    .miaoshu {
      padding: 10px;
      display: flex;
      margin-right: 10px;
      span {
        margin-right: 10px;
        padding: 0 10px;
        border-right: 1px solid #ccc;
      }
    }
    .h {
      display: flex;
      margin-right: 10px;
      border-bottom: 1px solid #ccc;
      padding: 10px;
    }
  }
}
</style>